<template>
  <div class="user">
    <PageSearch
      :formConfig="formConfig"
      @resetBtnClick="resetClick"
      @queryBtnClick="queryClick"
    />
  </div>
  <div>
    <PageContent
      ref="pageContentRef"
      :contentTableConfig="contentTableConfig"
      pageName="users"
      @newBtn="newBtnClick"
      @editBtn="editBtnClick"
    ></PageContent>
  </div>
  <div>
    <PageModel
      :modalConfig="modalConfigRef"
      ref="pageModelRef"
      :defaultInfo="defaultInfo"
      pageName="users"
    ></PageModel>
  </div>
</template>

<script lang="ts" setup>
import PageSearch from '@/components/page-search'
import PageModel from '@/components/page-model'
import PageContent from '@/components/page-content'

import { modalConfig } from './config/model.config'
import { formConfig } from './config/FormConfig'
import { contentTableConfig } from './config/content.config'

import { usePageSearch } from '@/hooks/use-page-search'
import { usePageModal } from '@/hooks/use-page-model'

import { useStore } from 'vuex'
import { computed ,ref} from 'vue'

const store = useStore()
const newCallback = () => {
  const passwordItem = modalConfig.formItems.find(
    (item: { field: string }) => item.field === 'password'
  )
  passwordItem!.isShow = false
}
const editCallback = () => {
  const passwordItem = modalConfig.formItems.find(
    (item: { field: string }) => item.field === 'password'
  )
  passwordItem!.isShow = true
}

const modalConfigRef = computed(() => {
  const departmentItem = modalConfig.formItems.find(
    (item) => item.field === 'departmentID'
  )
  departmentItem!.options = store.state.entireDeparment.map(
    (item: { name: any; id: any }) => {
      return { title: item.name, value: item.id }
    }
  )

  const roleItem = modalConfig.formItems.find((item) => item.field === 'roleID')
  roleItem!.options = store.state.entireRole.map(
    (item: { name: any; id: any }) => {
      return { title: item.name, value: item.id }
    }
  )
  return modalConfig
})
  const pageContentRef = ref<InstanceType<typeof PageContent>>()
  const resetClick = () => {
    if (pageContentRef.value) {
pageContentRef.value?.getPageData()
    }
    
  }
  const queryClick = (queryInfo: any) => {
    pageContentRef.value?.getPageData(queryInfo)
  }
// const [pageContentRef, resetClick, queryClick] = usePageSearch()
  const pageModelRef = ref<InstanceType<typeof PageModel>>()
  const defaultInfo = ref({})
  const newBtnClick = () => {
    defaultInfo.value = {}
    if (pageModelRef.value) {
      pageModelRef.value.isShowDialog = true
    }
    newCallback && newCallback()
  }
  const editBtnClick = (item: any) => {
    defaultInfo.value = { ...item }
    if (pageModelRef.value) {
      pageModelRef.value.isShowDialog = true
    }
    editCallback && editCallback()
  }
// const [pageModelRef, defaultInfo, newBtnClick, editBtnClick] = usePageModal(
//   newCallback,
//   editCallback
// )

</script>

<style scoped></style>
